<template>
	<section class="panel">
		<h3>My location & distances</h3>
		<p class="desc">Click anywhere on the map to set a location, then we’ll draw dotted lines to upcoming events with distances.</p>
		<div class="row">
			<button class="btn" @click="$emit('pick')">Pick on map</button>
			<button class="btn" @click="$emit('clear')" :disabled="!myLocation">Clear</button>
		</div>
		<ul v-if="myLocation" class="list">
			<li v-for="ev in upcomingEvents" :key="ev.id" class="item">
				<span class="name">{{ ev.title }}</span>
				<span class="dist">{{ formatDistance(ev) }}</span>
			</li>
		</ul>
	</section>
</template>

<script>
export default {
	name: 'MyLocationPanel',
	props: {
		myLocation: { type: Object, default: null },
		upcomingEvents: { type: Array, default: () => [] }
	},
	methods: {
		formatDistance(ev) {
			if (!this.myLocation) return '-'
			const R = 6371e3
			const toRad = d => (d * Math.PI) / 180
			const φ1 = toRad(this.myLocation.lat)
			const φ2 = toRad(ev.lat)
			const Δφ = toRad(ev.lat - this.myLocation.lat)
			const Δλ = toRad(ev.lng - this.myLocation.lng)
			const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ/2) * Math.sin(Δλ/2)
			const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
			const d = R * c
			if (d < 1000) return `${d.toFixed(0)} m`
			return `${(d/1000).toFixed(1)} km`
		}
	}
}
</script>

<style scoped>
.panel { padding: 12px; border-bottom: 1px solid #eee; }
.row { margin: 6px 0; display: flex; gap: 8px; }
.desc { color: #444; font-size: 13px; }
.btn { padding: 8px 12px; border: 1px solid #eadcc7; background: #f7f2ea; color: #5f503d; border-radius: 8px; cursor: pointer; }
.list { list-style: none; padding: 0; margin: 8px 0 0; }
.item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #eee; }
.name { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist { color: #111; font-weight: 600; }
</style> 